<div class="demo-actions">
  <strong>Input type: </strong>
  <mat-radio-group [value]="inputType" (change)="changeInput($event)">
    <mat-radio-button value="array">Array</mat-radio-button>
    <mat-radio-button value="stream">Stream</mat-radio-button>
    <mat-radio-button value="source">DataSource</mat-radio-button>
  </mat-radio-group>
</div>

<div class="demo-actions">
  <strong>Data Changes: </strong>
  <button mat-raised-button (click)="addRow()"> Add Row </button>
  <button mat-raised-button (click)="removeRow()"> Remove Row </button>
  <button mat-raised-button (click)="reassignDataClone()"> Clone Data </button>
  <button mat-raised-button (click)="shuffle()"> Shuffle </button>
</div>

<div class="demo-actions">
  <strong>Table: </strong>
  <button mat-raised-button (click)="this.renderRows()">Re-render</button>
  <button mat-raised-button (click)="this.removeDataSource()">Remove Data Source</button>
</div>

<div class="demo-actions">
  <button mat-raised-button (click)="highlightFirstRow()"> Highlight first row </button>
</div>

<div class="demo-actions">
  <div class="demo-track-by-select">
    <div class="demo-track-by-label">Track By</div>
    <mat-radio-group [(ngModel)]="trackByStrategy">
      <mat-radio-button [value]="'reference'"> Reference </mat-radio-button>
      <mat-radio-button [value]="'position'"> Position </mat-radio-button>
      <mat-radio-button [value]="'index'"> Index </mat-radio-button>
    </mat-radio-group>
  </div>
</div>

<mat-card>
  <h3> CdkTable </h3>

  <table cdk-table #cdkTable [dataSource]="dataSource" [trackBy]="trackBy">
    <!-- Name (normal column) -->
    <ng-container [cdkColumnDef]="column" *ngFor="let column of columnsToDisplay">
      <th cdk-header-cell *cdkHeaderCellDef> {{column}} </th>
      <td cdk-cell *cdkCellDef="let element"> {{element[column]}} </td>
    </ng-container>

    <tr cdk-header-row *cdkHeaderRowDef="columnsToDisplay"></tr>
    <tr cdk-row *cdkRowDef="let data; columns: columnsToDisplay;"></tr>
  </table>
</mat-card>
